import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';
import CustomIcon from './CustomIcon';
import styles from './styles.less';
import { iconMap } from './utils';

// 流程图标列表弹窗
const FlowIconList = ({ value, visible = false, onOk, onCancel, ...rest }) => {
    const [selectData, setSelectData] = useState(null);
    useEffect(() => {
        if (value) {
            setSelectData(value);
        }
    }, [value]);
    return (
        <Modal
            visible={visible}
            bodyStyle={{ padding: '9px 20px' }}
            className={styles.flowIconListWrap}
            title="选择模板图标"
            width={412}
            onCancel={() => {
                if (onCancel) {
                    onCancel();
                }
            }}
            onOk={() => {
                if (onOk) {
                    onOk(selectData);
                }
            }}
        >
            <div className={styles.iconCont}>
                {iconMap.map(item => (
                    <div className={styles.iconLIst} key={item.type}>
                        <CustomIcon
                            type={item.className}
                            className={`${styles.flowIcon} ${selectData === item.type ? styles.flowIconSel : ''}`}
                            isAntdIcon={false}
                            onClick={() => {
                                setSelectData(item.type);
                            }}
                            style={{
                                cursor: 'pointer',
                                color: item.color,
                                backgroundColor: item.backgroundColor || '',
                                // opacity: selectData === item.type ? 1 : 0.5,
                                width: '48px',
                                height: '48px',
                                lineHeight: '48px',
                                margin: '10px'
                            }}
                            {...rest}
                        />
                    </div>
                ))}
            </div>
        </Modal>
    );
};

export default FlowIconList;
